<template>
	<div>
		<div class="chain-link-bar-wrapper">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>风采管理</el-breadcrumb-item>
				<el-breadcrumb-item to="/news/listOfCompany">公司风采列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<el-card class="box-card">
			<div slot="header" class="clearfix"><span>公司风采列表</span></div>

			<div class="app-diliver-10"></div>

			<div>
				<div class="app-display-inline app-margin-h-20">
					<span class="color-black-second font-size-text">关键字：</span>
					<el-input clearable placeholder="公司名 风采标题 介绍" v-model="page.keyWord" style="width: 380px;"></el-input>
				</div>

				<div class="app-display-inline app-margin-h-20">
					<SubmitButton
						type="primary"
						plain
						icon="el-icon-search"
						:post-option="{
							url: searchUrl,
							data: page,
							callback: searchCB
						}"
					>
						搜索
					</SubmitButton>
				</div>
			</div>

			<div class="app-diliver-15"></div>
			<div class="app-diliver-15"></div>

			<el-table :data="newsList" stripe border @sort-change="sortMethod" style="width: 100%" class="nc-table-btn-ctrl">
				<el-table-column type="index" :index="indexMethod"></el-table-column>

				<el-table-column label="公司" width="300">
					<template slot-scope="scope">
						<span>{{ scope.row.company_name }}</span>
						<br />
						<span>{{ scope.row.company_address }}</span>
					</template>
				</el-table-column>

				<el-table-column label="标题" prop="title"></el-table-column>

				<el-table-column label="介绍" prop="intro"></el-table-column>

				<el-table-column label="封面">
					<template slot-scope="scope">
						<img style="width: 50px; margin: 0 5px 5px 0;" v-for="item in scope.row.coverList" :src="item" />
					</template>
				</el-table-column>

				<el-table-column label="连接" prop="url"></el-table-column>

				<el-table-column label="发布时间" prop="date_time" sortable="custom"></el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<a class="" :href="'#/news/detailOfCompany/' + scope.row.id" target="_blank"><el-button plain size="mini">详情</el-button></a>
					</template>
				</el-table-column>
			</el-table>

			<div class="pager-bar-wrapper">
				<el-pagination
					background
					layout="prev, pager, next, total"
					:total="page.totalRow"
					:page-size="page.pageSize"
					:current-page="page.pageNum"
					@current-change="pageNumChange"
					@prev-click="pageNumChange"
					@next-click="pageNumChange"
					@size-change="pageSizeChange"
				></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
import NcButton from '../common/NcButton';
import SubmitButton from '../common/SubmitButton';

import Api from '../../api/Api';
import NewsApi from '../../api/NewsApi';

import { mapGetters } from 'vuex';

export default {
	components: {
		NcButton,
		SubmitButton
	},
	data() {
		return {
			newsList: [],

			page: {
				keyWord: '',
				columnProp: '',
				columnOrder: '',
				pageNum: 1,
				pageSize: 10
			},

			searchUrl: NewsApi.URL_LIST_COMPANY
		};
	},
	computed: {
		...mapGetters(['hasPerm'])
	},
	created() {
		this.getPage();

		//this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
	},
	beforeDestroy: function() {
		//this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
	},
	methods: {
		sortMethod(column) {
			this.page.columnProp = column.prop;
			this.page.columnOrder = column.order;
			this.getPage();
		},
		searchCB(json) {
			this.newsList = json.list;
			this.setPage(json);
		},
		getPage() {
			NewsApi.listOfCompany(this.page, json => {
				this.newsList = json.list;
				this.setPage(json);
			});
		},
		pageNumChange(pageNum) {
			this.page.pageNum = pageNum;
			this.getPage();
		},
		pageSizeChange(pageSize) {
			this.page.pageSize = pageSize;
			this.getPage();
		},
		setPage(json) {
			this.page.pageNum = json.pageNum;
			this.page.pageSize = json.pageSize;
			this.page.totalRow = json.totalRow;
		},
		indexMethod(index) {
			return index + 1 + (this.page.pageNum - 1) * this.page.pageSize;
		}
	}
};
</script>
